/* --------- Just for demo page --------- */
body{
	max-width: 632px;
	margin: 0 auto;
}
.icon-card{
	width: 92px;
	height: 64px;
	float: left;
	text-align: center;
	border: solid 1px #eee;
	padding-top: 8px;
}
.icon-card label{
	display: block;
	text-align: center;
	font-size: 11px;
}
/* --------- /Just for demo page --------- */

/* In app code, you might want to have a class looking like this. 
		Note that the svg will stretch to the size of this div */
svg.svg-ico{
	width: 100%;
	height: 100%;
}

/* This is the div container for all icons. This guarantees that we can use the full DOM layout (e.g., flexbox) without worrying svg support.*/
.icon{
	display: inline-block;
	width: 32px;
	height: 32px;
	margin: 0 8px;
}

.icon.big{
	width: 64px;
	height: 64px;
}

/* symbols has been stripped of their "fill" attribute (to workaround chrome bug on styling external svg)
		so, now you can simply style them the way you want.
*/
.icon:hover{
	fill: red;
}
